<template>
  <div class="GraduateMigrate">
      <!-- 中国地图展示 -->
      <div id="mapBox" class="centerItem">
      </div>
      <div class="horn topRight"></div>
      <div class="horn topLeft"></div>
      <div class="horn bottomRight"></div>
      <div class="horn bottomLeft"></div>
  </div>
</template>

<script>
var chart;
export default {
  name: 'GraduateMigrate',
  props: ['migrateData'],
  data () {
    return {
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
      initMap () {
        // 基于准备好的dom，初始化echarts实例
        chart = this.$echarts.getInstanceByDom(document.getElementById('mapBox'))
        if (chart === undefined) {
            chart = this.$echarts.init(document.getElementById('mapBox'))
        }
        // push进去线路开始-结束地点-经纬度
        var convertData = (data) => {
            var res = []
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i]
                var fromCoord = this.migrateData.geoCoordMap[dataItem[0].name]
                // 开始地点
                var toCoord = this.migrateData.geoCoordMap[dataItem[1].name]
                // 结束地点
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord
                    }, {
                        coord: toCoord
                    }])
                }
            }
            return res
        }
        var color = this.migrateData.color
        // 地点圆圈和字的颜色，线的颜色，箭头颜色
        // 数据
        var series = []
        // 遍历由广州到其他城市的线路
        // 配置
        series.push({
            // 系列名称，用于tooltip的显示
            name: 'top10',
            type: 'lines',
            zlevel: 1,
                // 用于 Canvas 分层，层级高的层放在层级低的层上面
                // effect出发到目的地 的白色尾巴线条
                // 线特效的配置
                effect: {
                    show: true,
                    period: 10,
                    // 特效动画的时间，单位为 s
                    trailLength: 0.1,
                    // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                    color: '#fff',
                    // 移动箭头颜色
                    symbol: 'emptyCircle',
                    // 空心圆
                    symbolSize: 2,
                    // 特效标记的大小
                    shadowBlur: 15
                    // 线条周围的虚轨
                },
                // lineStyle出发到目的地 的线条颜色
                lineStyle: {
                    normal: {
                        color: color,
                        width: 0,
                        curveness: 0.2
                        // 幅度
                    }
                },
                data: convertData(this.migrateData.HFData)
                // 开始到结束数据
            }, {
                // 出发地信息
                name: '广州',
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 10,
                    color: '#fff',
                    trailLength: 0,
                    symbol: 'emptyCircle',
                    symbolSize: 2,
                    shadowBlur: 15
                },
                lineStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: color // 出发
                        }, {
                            offset: 1,
                            color: color // 结束 颜色
                        }], false),
                        width: 2,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(this.migrateData.HFData)
            }, {
                // 目的地信息
                name: '广州',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function(val) {
                    return val[2] / 6
                },
                itemStyle: {
                    normal: {
                        color: color
                    }
                },
                data: this.migrateData.HFData.map((dataItem) => {
                    return {
                        name: dataItem[1].name,
                        value: this.migrateData.geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                        num: dataItem[1].value,
                        stuNum: dataItem[1].num
                    }
                })
            })
        // 指定相关的配置项和数据
        var mapBoxOption = {
            geo: {
                map: 'china',
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                aspectScale: 0.75,
                zoom: 1.20,
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#00a0c9'
                        }
                    },
                    emphasis: { // 对应的鼠标悬浮效果
                        show: false,
                        textStyle: {
                            color: '#00a0c9'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#132937',
                        borderColor: '#0692a4'
                    },
                    emphasis: {
                        areaColor: '#0b1c2d'
                    }
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params, b, c) {
                    let stuNum = typeof (params.data.stuNum) === 'undefined' ? '' : params.data.stuNum + '个'
                    var tips = '<ul style = "color:#3ed4ff">'
                    tips += '<li>城市名称：' + params.name + '</li>'
                    tips += '<li>毕业生数：' + stuNum + '</li>'
                    tips += '<li>最近上报时间：' + new Date().toLocaleTimeString() + '</li>'
                    tips += '</ul>'
                    return tips
                }
            },
            series: series
        }
        // 使用制定的配置项和数据显示图表
        chart.setOption(mapBoxOption)
        // echart图表自适应
        window.onresize = () => {
            chart.resize()
        }
      },
      resizeChart () {
          chart.resize()
      }
  },
  beforeDestroy () {
      this.$echarts.dispose(chart);
  }
}
</script>

<style scoped>
.GraduateMigrate{
  position: relative;
  width: 100%;
  height: 100%;
}
.centerItem {
  width: 100%;
  height: 100%;
  /* background-color: #080a1f; */
  margin: 0 auto;
}
</style>
